<template>
  <div id="myPurchase-detail">
    <div class="filter-box">
      <div class="top-box">
          <div class="box-title">基本信息</div>
      </div>
      <a-form-model :model="form" :rules="rules" ref="form">
      <a-row class="info">
        <a-col :span="8">
            <a-form-model-item label="所属组织" ref="orgName" class="form-col" prop="orgName">
            <a-input
              v-model="form.orgName"
              placeholder="请输入银行编码"
              style="width: 250px;"
              @click="showDiag"
            />
            </a-form-model-item>
        </a-col>
        <a-col :span="8">
            <a-form-model-item label="档案编号" ref="code" class="form-col" prop="code">
            <a-input
              v-model="form.code"
              placeholder="请输入档案编号"
              style="width: 250px;"
            />
            </a-form-model-item>
        </a-col>
        <a-col :span="8">
            <a-form-model-item label="档案名称" ref="name" class="form-col" prop="name">
            <a-input
              v-model="form.name"
              placeholder="请输入档案名称"
              style="width: 250px;"
            />
            </a-form-model-item>
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="8">
                <a-form-model-item label="启用状态" ref="enablestate" class="form-col" prop="enablestate">
                <a-select
                v-model="form.enablestate"
                style="width: 250px;"
                showSearch
                allowClear
                placeholder="请选择状态">
                <a-select-option
                  :value="2"
                  >{{"启用"}}
                </a-select-option>
                <a-select-option
                  :value="3"
                  >{{"禁用"}}
                </a-select-option>
                </a-select>
                </a-form-model-item>
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="2">
          <a-button type="primary" @click="goBack">返回</a-button>
        </a-col>
        <a-col :span="2">
        <a-button type="primary" @click="handleSubmit">提交</a-button>
        </a-col>
      </a-row>
      </a-form-model>
    </div>
    <div class="container">
      <div class="container-title">档案明细</div>
          <DataTable
        rowKey="phid"
        :btns="btns"
        :tableData="Data"
        :tableColumn="tableColumn"
        :showConfig="false"
      />
    </div>
    <a-modal
      title="选择组织"
      :visible="formVisible"
      @cancel="hideFormVisible"
      :footer="null"
      width="70%">
      <div>
            <div>
              <div>
                <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">组织：</div>
                <a-input-search placeholder="请输入组织名称 " style="width: 200px" v-model="searchOrg.name" @search="searchWl"/>
              </div>
              <DataTable rowKey="pkOrg"  :showConfig="false" :tableData="Data2" :tableColumn="tableColumn2" :pageConfig="pageConfig"></DataTable>
            </div>
        </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Ground extends Vue {
  $refs!:{form: HTMLFormElement}
  orgid: any = ''
  form: any = {
    orgName: undefined,
    code: undefined,
    name: undefined,
    enablestate: 2
  }
  rules: any = {
  orgName: [{required: true, message: '请选择组织', trigger: 'blur'}],
  code: [{required: true, message: '请输入档案编号', trigger: 'blur'}],
  name: [{required: true, message: '请输入档案名称', trigger: 'blur'}]
  }
  searchOrg: any = {
    name: ''
  }
  formVisible: boolean = false;
  hideFormVisible () {
    this.formVisible = false;
    this.searchForm['orgName'] = ''
    this.searchOrg.name = ''
  }
  Data: any = []
  delData: any = []
  tableColumn: any = {
    rowno: {
      label: '行号',
      width: 80
    },
    code: {
      type: 'input',
      label: '编码',
      width: 200
    },
    name: {
      type: 'input',
      label: '名称',
      width: 200
    },
    memo: {
      type: 'input',
      label: '备注',
      width: 200
    },
    action: {
      label: '操作',
      width: 230,
      template: [
        {
            tag: 'a',
            text: '删除',
            callback: this.deleteCheck
          }
      ]
    }
  }
  Data2: any[] = [];
  tableColumn2: any = {
    pkOrg: {
      label: '组织编码',
      minWidth: 120
    },
    name: {
      label: '组织名称',
      minWidth: 120,
      hidden: true
    },
    action: {
      label: '操作',
      width: 120,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmORG
        }
      ]
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  // 返回键
  goBack () {
    this.$router.back()
  }
  handleSubmit () {
    this.$refs['form'].validate((valid: any) => {
   if (valid) {
    this.form.phidOrg = this.orgid
    let data = {defDocListHeadVO: this.form, defDocDetailVOlist: []}
    let index: Number = 0
    if (this.Data.every((val: any, idx: any, array: any) => {
        // alert('val' + val + 'idx' + idx + 'array' + array)
        if (!val.code || !val.name) {
          index = idx + 1
          return false
        }
        return true
    })) {
        this.delData.map((item: any) => {
          item.deleted = 1;
        })
        data.defDocDetailVOlist = this.Data.concat(this.delData)
        // alert(JSON.stringify(data.defDocDetailVOlist))
        this.$api.defdocAddDefdocFetch(data).then((res: any) => {
          this.$message.success('保存成功！')
          this.$router.back()
        })
    } else {
      this.$message.error('第' + index + '行编码和名称不能为空！')
    }
   } else {
       console.log('error submit!!');
       return false;
       }
   });
  }
  showDiag () {
    this.getOrgList()
    this.formVisible = true
  }
  // 搜索物料
  searchWl (val: any) {
    // alert(val);
    this.searchOrg.name = val
    this.getOrgList()
  }
  confirmORG (val: any, cb: any) {
    this.orgid = val.pkOrg
    this.form.orgName = val.name
    this.formVisible = false
    this.searchOrg.name = ''
  }
  // 组织列表
  getOrgList () {
    let word = this.searchOrg.name
    let { current, pageSize } = this.pageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.searchValue = word
    }
    this.$api.docInfoOrgListFetch(data).then((res: any) => {
      let orgList = res.data.records.map((item: any) => { item.label = item.name; item.value = item.pkOrg })
      this.Data2 = res.data.records
      this.pageConfig.total = res.data.total;
    }).catch()
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getOrgList();
  }
  get defdocId () {
    return this.$route.query.phid
  }
  btns: any[] = [
    {
      icon: 'add',
      callback: () => this.btnsCallback()
    }
  ];
// 删除
  deleteCheck (val: any) {
    if (val.phid) {
      this.delData.push(this.Data.splice(this.Data.indexOf(val), 1)[0])
    } else {
      this.Data.splice(this.Data.indexOf(val), 1)
    }
  }
  btnsCallback () {
    // alert(this.Data)
    this.Data.push({phid: '', rowno: '', code: '', name: '', memo: '', enablestate: 2})
  }
  init () {
    this.getDetail()
  }
  getDetail () {
    if (this.defdocId) {
      let data = {
        phid: this.defdocId,
        size: 9999,
        page: 1
      }
      this.$api.defdocDetaillistFetch(data).then((res: any) => {
        this.form = res.data.header
        this.orgid = res.data.header.phidOrg
        this.Data = res.data.pageInfoList.list
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#myPurchase-detail {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;

        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
      margin-bottom: 10px;
    }

}
.model-icon{
  color: green;

  .icon{
    font-size: 50px;
  }
}
.model-text{
  font-weight: 700;
  font-size: 16px;
}
.container{
  padding-bottom: 30px;
  border-bottom: 20px solid #ebf0f5;
  height: 450px;
  overflow-x: hidden;
	overflow-y: scroll;
}
.container::-webkit-scrollbar{
	display: none;
}
.delivery-record{
  margin: 0 10px;
  padding-left: 20px;
  border-left: 1px solid #4286ff;
  position: relative;
  padding-top: 30px;
  &:nth-child(2){
    padding-top: 0;
  }
  .circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #4286ff;
    background-color: #4286ff;
    position: absolute;
    left: -10px;
  }
  .record-info{
    margin-bottom: 15px;

  }
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
